<template>
	<div class="shopHead">
		<div class="left u-flex u-flex-1 u-row-between u-col-center">
			<div class="u-flex u-row-between u-col-center">
				<u-avatar :src="shop.logo" size="mini"></u-avatar>
				<p class="shopName u-line-1 u-m-l-10">{{shop.shop_name}}</p>
			</div>
			<u-tag text="进店" type="warning" shape="circle" style="justify-self:flex-end"
				@click="$u.route({url:'/pagesC/shop/storeDetails',params:{shop_id:shop.id}})"></u-tag>
		</div>
		<div style="overflow:scroll">
			<view class="shopGoodsBox">

				<view class="goodsWrap" v-for="(goods,index) in shop.goodres"
					@click.stop="getnav('/pagesC/goods/goodsDetails?id='+goods.id)">
					<slot></slot>
					<u-image width="100%" height="350rpx" :src="goods.thumb_url" border-radius="8rpx 8rpx 0 0">
					</u-image>
					<view class="priceWrap">
						<p class="name"> <text v-if="goods.leixing === 1"
								class="badeg-self">自营</text>{{ goods.goods_name }}</p>
						<view class="bottom">
							<text class="goodsPrice"><span class="rmb">¥</span>{{ goods.zs_price }}</text>
							
							<text class="moreAction" v-if="false">···</text>
						</view>
					</view>

				</view>
			</view>
		</div>

	</div>
</template>

<script>
	import goodsCard from "../goodsCard"
	export default {
		name: "shopItem",
		components: {
			goodsCard,

		},
		props: {
			shop: {
				type: Object,
				required: true,
				default: () => {
					{}
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.shopHead {
		background-color: #fff;
		border-radius: 12upx;
		margin: 15upx;
		padding: 15upx 20upx;

		.left {
			display: flex;
			align-items: center;

			.shopLogo {
				width: 80upx;
				height: 80upx;
				border-radius: 400upx;
				margin-right: 12upx;
			}

			.shopName {
				font-size: 32upx;
			}
		}

		.shopGoodsBox {
			margin: 14upx 0;
			display: flex;
			flex-wrap: nowrap;
		}

		.goodsWrap {
			background: #fff;
			border-radius: 12rpx;
			overflow: hidden;
			margin: 10rpx;
			flex-shrink: 0;
			width: 345rpx;
			flex-basis: 300upx;
			margin-right: 0rpx;
			display: inline-block;

			.priceWrap {
				padding: 12rpx;

				.badeg-self {
					font-size: 10px;
					padding: 4rpx 8rpx;
					border-radius: 100rpx;
					display: inline-block;
					color: #fff;
					background-image: linear-gradient(to right, #ffa468, #fa3f3f);
					line-height: 1;
					margin-right: 8rpx;
				}

				.bottom {
					display: flex;
					align-items: center;
					line-height: 60rpx;

					.moreAction {
						color: #aeb4bb;
						font-weight: 800;
						font-size: 40rpx;
						letter-spacing: -4px;
						margin-right: 14rpx;
					}
				}

				/deep/.goodsPrice {
					font-weight: 600;
					color: #fa3f3f;
					font-size: 34rpx;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;

					.rmb {
						font-weight: 400;
						font-size: 20rpx;
					}
				}

				.tag {
					padding: 2rpx 4rpx;
					margin: 5rpx 5rpx 5rpx 0;
				}

				.name {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					// -webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					line-height: 1.4;
					font-size: 28rpx;
					letter-spacing: 1.75rpx;
					margin: 8rpx 0;
					color: #444;
				}
			}

			.coupon {
				width: 24rpx;
				height: 16rpx;
			}
		}
	}
</style>
